@import '../style/theme/color';
@import '../style/core/font';

.devui-tree-select {
  position: relative;
  width: 100%;

  .devui-select-input {
    &:not([disabled]) {
      color: $dark-1;
    }

    &.devui-tree-select-input {
      color: $gray-1;
      font-size: $font-size-base;
      padding: 2px 10px 0 10px;
      height: unset;
      min-height: 28px;
      max-height: 52px;
      overflow-y: scroll;
      padding-right: 20px;
      line-height: 22px;
      display: flex;
    }
  }

  &:hover {
    & .clear {
      position: absolute;
      height: 14px;
      width: 14px;
      right: 12px;
      top: calc((100% - 14px) / 2);
      cursor: pointer;

      &::after,
      &::before {
        position: absolute;
        content: '';
        height: 14px;
        width: 2px;
        background-color: $dark-1;
        left: 50%;
      }

      &::before {
        transform: rotate(45deg);
      }

      &::after {
        transform: rotate(-45deg);
      }

      &:hover {
        &::after,
        &::before {
          background-color: $brand-1;
        }
      }
    }
  }

  .devui-select-chevron-icon {
    right: 12px;
    top: calc((100% - 6px) / 2);
    position: absolute;
    user-select: none;
    pointer-events: none;
    height: 6px;
    line-height: 6px;
    z-index: 1;

    svg {
      transition: transform 0.3s;

      polygon {
        fill: $dark-2;
      }
    }

    &.open {
      z-index: 1052;

      svg {
        transform: rotate(180deg);
      }
    }

    &.clear {
      opacity: 0;
    }

    &.disabled {
      svg polygon {
        fill: $disabled-content;
      }
    }
  }

  &:not(:hover) {
    .devui-select-chevron-icon:not(.disabled) {
      opacity: 1;
      transition: opacity 0.1s linear;
    }
  }
}

.devui-tree-select.devui-options-container {
  width: 100%;
  color: $dark-1;
  padding: 5px 0;

  .devui-tree ::ng-deep .devui-tree-node.devui-operable-tree-node {
    .devui-tree-node__content {
      margin-left: 10px;
    }

    & > .devui-tree-node__children::before {
      left: calc(0.8em + 9px); // 上面增加了margin需要加到原先的计算中
    }

    &.devui-tree-node__open > .devui-tree-node__content::after {
      left: 9px; // 上面增加了margin需要加到原先的计算中
    }

    & .active {
      background-color: transparent;
    }

    &.selected {
      position: relative;
      min-width: calc(100% - 1.2em); // 当数据无法铺满一行时通过最小宽度使其铺满

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: $brand-3;
        z-index: -1;
      }
    }
  }

  .devui-no-data-tip {
    user-select: none;
    cursor: not-allowed;
    padding: 5px 12px;
    background-color: $disabled-bg;
    color: $disabled-content;
  }
}

.devui-tree-select.devui-search-container {
  .devui-search-in-dropdown {
    height: 32px;
  }
}

.devui-select-item {
  display: inline-flex;
  align-items: center;
  color: $dark-1;
  padding: 1px 10px;
  line-height: 1.5;
  background-color: $tag-label-bgcolor;
  border-radius: 2px;
  margin: 0 2px 2px 0;
  border: 1px solid $tag-label-bgcolor;
  max-width: calc(100% - 2px);
  height: 22px;

  &.devui-no-label-item {
    padding: 1px 0;
    background: transparent;
    border-color: transparent;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .devui-select-item-content {
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 24px);

    &:hover {
      color: $hover-control;
    }
  }

  & > .devui-select-item-clear-icon {
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    margin-left: 12px;
    border-radius: 50%;
    background-color: $gray-1;
    position: relative;
    top: -1px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    svg path {
      fill: $font-white;
    }

    &:hover {
      background-color: $hover-control;
    }
  }
}

.devui-select-list {
  display: flex;
  flex-wrap: wrap;
}

svg.svg-icon-search path {
  fill: $dark-2;
}

// 此处设置默认宽度，使用组件时可以自定义宽度，尽量不要入侵组件内部样式。
:host {
  display: inline-block;
  width: 100%;
}

.devui-select-input.devui-form-control.devui-tree-select-input.devui-dropdown-origin.devui-dropdown-origin-open {
  &.devui-dropdown-origin-bottom,
  &.devui-dropdown-origin-top {
    &::after {
      display: none;
    }
  }
}

.devui-select-input.devui-tree-select-input.disabled {
  & .devui-select-item {
    background-color: $disabled-bg;
    border-color: $disabled-border;

    &.devui-no-label-item {
      background-color: transparent;
      border-color: transparent;
      color: $disabled-content;
    }

    & > .devui-select-item-content {
      &,
      &:hover,
      &:focus {
        color: $disabled-content;
        cursor: not-allowed;
      }
    }

    & > .devui-select-item-clear-icon {
      &,
      &:hover,
      &:focus {
        background-color: $disabled-border;
        cursor: not-allowed;

        svg path {
          fill: $disabled-bg;
        }
      }
    }
  }
}
